<template>
  <div class="directorys-container">
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb" v-if="subjectName">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{subjectName}}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索添加区域 -->
      <el-form :inline="true" :model="directorForm" ref="directorFormRef">
        <el-form-item label="目录名称">
          <el-input v-model="directorForm.directoryName" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="directorForm.state" placeholder="请选择" clearable>
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearContent">清除</el-button>
          <el-button type="primary" @click="searchDirectorys">搜索</el-button>
        </el-form-item>
        <el-form-item class="add-directoys">
          <el-link
            icon="el-icon-back"
            type="primary"
            :underline="false"
            @click="$router.back()"
            v-if="subjectsId"
          >返回学科</el-link>
          <el-button type="success" icon="el-icon-edit" @click="addDirectorysShow">新建目录</el-button>
        </el-form-item>
      </el-form>
      <!-- 提示信息 -->
      <el-alert :title="`数据一共${allTotals}条`" type="info" show-icon :closable="false"></el-alert>
      <!-- 目录列表区域 -->
      <el-table :data="directoryList" style="width: 100%" class="table-content">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科"></el-table-column>
        <el-table-column prop="directoryName" label="目录名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">{{scope.row.addDate | format}}</template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">{{scope.row.state ? '启用':'禁用'}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="primary"
              @click="toggleState(scope.row)"
            >{{scope.row.state ? '禁用':'启用'}}</el-link>
            <el-link
              :underline="false"
              :type="scope.row.state ?'info':'primary'"
              :disabled="scope.row.state ?true:false"
              @click="editDirectorysName(scope.row)"
            >修改</el-link>
            <el-link
              :underline="false"
              :type="scope.row.state ?'info':'primary'"
              :disabled="scope.row.state ?true:false"
              @click="deleteDirectorys(scope)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestData.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="requestData.pagesize"
        layout="  prev, pager, next,sizes, jumper"
        :total="allTotals"
      ></el-pagination>
    </el-card>
    <!-- 新增目录弹出框 -->
    <el-dialog title="'新增目录" :visible.sync="dialogFormVisible" width="30%" @close="closeResetForm">
      <!-- 加入添加目录的组件 -->
      <directorys-add
        @close="dialogFormVisible=false"
        ref="directorysAdd"
        :userID="userID"
        :subjectsId="subjectsId"
      ></directorys-add>
    </el-dialog>
    <!-- 修改目录弹出框 -->
    <el-dialog
      title="修改目录"
      :visible.sync="editDialogFormVisible"
      width="30%"
      @close="editCloseResetForm"
      @open="directoryShow"
    >
      <!-- 加入修改目录的组件 -->
      <directorys-edit
        @close="editDialogFormVisible=false"
        ref="directorysedit"
        :userID="userID"
        :directoryForm="directoryData"
        :subjectsId="subjectsId"
      ></directorys-edit>
    </el-dialog>
  </div>
</template>

<script>
// 导入请求目录列表的组件
import { list, changeState, detail, remove } from '@/api/hmmm/directorys'
// 导入格式化时间的组件
import { parseTimeByString } from '@/filters'
// 导入添加目录名称的组件
import DirectorysAdd from '../components/directorys-add'
// 导入修改目录名称的组件
import DirectorysEdit from '../components/directorys-edit'
// import func from '../../../vue-temp/vue-editor-bridge'
export default {
  name: 'Directorys',
  data() {
    return {
      directorForm: {
        state: '',
      }, // 表单数据
      allTotals: 0, // 总数据条数
      directoryList: [], // 表格列表数据
      requestData: {
        // 请求的数据对象
        page: 1,
        pagesize: 10,
        directoryName: '',
        subjectID: null,
      },
      dialogFormVisible: false, // 控制添加弹出框的显示与隐藏
      editDialogFormVisible: false, // 控制修改弹出框的显示与隐藏
      userID: 0, // 数据id
      directoryData: {}, // 表单数据
      subjectsId: 0, // 学科列表的id值
      subjectName: '', // 学科列表的name值
    }
  },
  // inject: ['reload'],
  components: { DirectorysAdd, DirectorysEdit },
  created() {
    // 获取有学科列表跳转过来的id值
    this.getSubjectsId()
    // 加载列表数据
    this.loadDirectoryList()
    console.log(this.$route.query)
  },
  watch: {
    '$route.query': function () {
      this.loadDirectoryList()
    },
  },
  methods: {
    // 加载目录列表
    async loadDirectoryList() {
      if (this.subjectsId) {
        this.requestData.subjectID = this.subjectsId
      } else {
        console.log(this.$route.path)
        // delete this.requestData.subjectID
        // try {
        //   const { data: res } = await list(this.requestData)
        //   this.directoryList = res.items
        //   this.allTotals = res.counts
        //   // console.log(res);
        // } catch (error) {
        //   this.$message.error('获取目录列表失败')
        // }
      }
      try {
        const { data: res } = await list(this.requestData)
        this.directoryList = res.items
        this.allTotals = res.counts
        console.log(this.subjectsId)
        // console.log(res);
      } catch (error) {
        this.$message.error('获取目录列表失败')
      }
    },
    // 分页每页条数改变时触发
    handleSizeChange(val) {
      this.requestData.pagesize = val
      // 重新渲染页面
      this.loadDirectoryList()
    },
    // 分页当前页改变时触发
    handleCurrentChange(val) {
      this.requestData.page = val
      // 重新渲染页面
      this.loadDirectoryList()
    },
    // 清空搜索内容
    clearContent() {
      this.directorForm.directoryName = ''
      this.directorForm.state = ''
      this.searchDirectorys()
    },
    // 根据条件搜索目录
    searchDirectorys() {
      this.requestData.directoryName = this.directorForm.directoryName
      this.requestData.state = this.directorForm.state
      if (this.directorForm.state === '') {
        delete this.requestData.state
      }
      this.loadDirectoryList()
    },
    // 修改状态
    async toggleState(row) {
      row.state = row.state === 1 ? 0 : 1
      try {
        const res = await changeState(row)
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 显示添加目录的弹出框
    async addDirectorysShow() {
      this.dialogFormVisible = true
      this.isEdit = false
    },
    // 关闭添加弹出框 并重置表单
    closeResetForm() {
      // 调用子组件上面的方法
      this.$refs.directorysAdd.resetForm()
    },
    // 关闭修改弹出框 并重置表单
    editCloseResetForm() {
      this.$refs.directorysedit.resetForm()
    },
    // 修改弹出框的open事件 获取目录详情
    async directoryShow() {
      try {
        const { data: res } = await detail(this.userID)
        console.log(res)
        this.directoryData = res
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },
    // 点击修改弹出对话框并渲染数据
    editDirectorysName(row) {
      console.log(row)
      this.userID = row.id
      this.editDialogFormVisible = true
    },

    // 删除目录列表
    async deleteDirectorys(scope) {
      try {
        const res = await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        if (res === 'confirm') {
          await remove(scope.row.id)
        }
        // 渲染列表
        this.loadDirectoryList()
        // 成功提示
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
        this.$message.info('取消了删除')
      }
    },
    // 获取从学科列表传递过来的参数
    getSubjectsId() {
      this.subjectsId = this.$route.query.id
      this.subjectName = this.$route.query.name
      console.log(this.subjectsId)
    },
  },

  // 过滤器 格式化时间
  filters: {
    format: function (val) {
      return parseTimeByString(val)
    },
  },
}
</script>

<style scoped lang='less'>
.el-pagination {
  float: right;
  margin-bottom: 10px;
}

.table-content {
  margin: 12px 0;
}
.el-link {
  margin-right: 10px;
}
.add-directoys {
  float: right;
}
.breadcrumb {
  margin-bottom: 15px;
}
</style>
